<template>
  <div id="majorList" v-loading="loading">
    <div class="major-item" v-for="item in majorList?.majors" :key="item.code">
      <div class="fcolor333 f20 mb10 curr" style="font-weight: bold">
        <span @click="handleChangeDet(item)">{{ item.name }}</span>
      </div>
      <div class="fcolor999 f14">
        <span class="mr20">国标代码: {{ item.code }}</span>
        <span class="mr20">学制 {{ item.learnYear }}年</span>
        <span class="mr20">
          男女比例 {{ item.maleRatio }}:{{ item.femaleRatio }}
        </span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const loading = ref(false);

const { majorList } = defineProps({
  majorList: {
    type: Object,
    default: () => {},
  },
});
const handleChangeDet = (item) => {
  let level = '';
  if (item.eduLevel == 'ben') {
    level = 'benke';
  } else {
    level = 'zhuanke';
  }
  const url =
    '/majorLibrary/majorLibraryDet' +
    '?code=' +
    item.code +
    '&name=' +
    item.name +
    '&level=' +
    level;
  window.open(url, '_blank');
};
const handleTableLoading = (isShow) => {
  loading.value = isShow;
};
defineExpose({
  handleTableLoading,
});
</script>

<style lang="scss" scoped>
#majorList {
  .major-item {
    padding: 15px 0 10px;
    border-bottom: 1px solid #f2f2f2;
  }
  .major-item span:not(:first-child):before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #ccc;
    vertical-align: text-top;
    margin-right: 30px;
    margin-top: 4px;
  }
}
</style>
